<template>
	<view class="serach_main" v-show="imgLoaded" @click="search">
		<input name="search" type="text" class="search" :placeholder="keys[idx]" />
		<image class="image" src="../../../static/img/search/search.svg" alt="" @load="imgLoaded = true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgLoaded: false,
				idx: 0,
				keys: ["男装", "女装", "男鞋", "女鞋", "裙子", "帽子", "首饰"],
			};
		},
		computed: {
			key() {
				return this.keys[this.idx];
			},
		},
		methods: {
			search() {
				uni.setStorageSync('preSearchKey', this.key);
				uni.navigateTo({
					url: `../../pages/search/SearchPage`,
					animationType: 'slide-in-right',
				})
			},
		},
		created() {
			this.idx = parseInt(Math.random() * 7);
		},
	};
</script>
<style lang="scss" scoped>
	.serach_main {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 36rpx;
		background-color: rgb(245, 245, 245);
		box-sizing: border-box;

		.search {
			border: none;
			outline: none;
			font-size: 1rem;
			text-align: left;
			background-color: rgb(245, 245, 245);
			width: calc(100% - 100rpx);
		}

		.image {
			width: 74rpx;
			height: 74rpx;
		}

	}
</style>
